<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <title>Column Chart example</title>
    <gui:resources components="['chart']" mode='debug'/>
</head>

<body class='yui-skin-sam'>

    <h2>Column Chart</h2>

    <div id='columnChart' style="width:600px; height: 300px"></div>

    <gui:columnChart
        id='myColChart'
        renderTo="columnChart"
        data="[
            [ month: 'Oct', pork: 1354, beef: 1442 ],
            [ month: 'Nov', pork: 1326, beef: 1496 ],
            [ month: 'Dec', pork: 1292, beef: 1582 ],
            [ month: 'Jan', pork: 1387, beef: 1597 ],
            [ month: 'Feb', pork: 1376, beef: 1603 ]
        ]"
        seriesDefs="[
            [
                pork:'Sales of Pork',
                style:[
                    image: 'images/tube.png',
                    mode: 'no-repeat',
                    color: 0x2e434d,
                    size: 40
                ]
            ],
            [
                beef:'Sales of Beef',
                style:[
                    image: 'images/tube.png',
                    mode: 'no-repeat',
                    color: 0xc2d81e,
                    size: 40
                ]
            ]
        ]"
        style="[
            border: [color: 0x96acb4, size: 12],
            font: [name: 'Arial Black', size: 14, color: 0x586b71],
            dataTip:
            [
                border: [color: 0x2e434d, size: 2],
                font: [name: 'Arial Black', size: 13, color: 0x586b71]
            ],
            xAxis:
            [
                color: 0x2e434d
            ],
            yAxis:
            [
                color: 0x2e434d,
                majorTicks: [color: 0x2e434d, length: 4],
                minorTicks: [color: 0x2e434d, length: 2],
                majorGridLines: [size: 0]
            ]
        ]"
    />


</body>
</html>